<template>
  <div class="contract-management-page">
    <div class="page-header">
      <h2>合同管理系统</h2>
      <div class="header-actions">
        <el-button type="primary" icon="Plus" @click="showAddDialog = true">新建合同</el-button>
        <el-button type="success" icon="Upload">导入合同</el-button>
        <el-button icon="Download">导出合同</el-button>
      </div>
    </div>

    <!-- 统计概览 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8f4ff">
            <el-icon color="#409eff" :size="24"><Document /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalContracts }}</div>
            <div class="stat-label">合同总数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff5e8">
            <el-icon color="#fa8c16" :size="24"><Edit /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.draftContracts }}</div>
            <div class="stat-label">草稿合同</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8fff3">
            <el-icon color="#52c41a" :size="24"><CircleCheck /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.activeContracts }}</div>
            <div class="stat-label">执行中</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff0f0">
            <el-icon color="#ff4d4f" :size="24"><Warning /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.expiringContracts }}</div>
            <div class="stat-label">即将到期</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 主内容 -->
    <el-card class="main-card">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <!-- 合同列表 -->
        <el-tab-pane label="合同列表" name="list">
          <el-form :inline="true" :model="filterForm" class="filter-form">
            <el-form-item label="合同编号">
              <el-input v-model="filterForm.contractNo" placeholder="请输入合同编号" clearable />
            </el-form-item>
            <el-form-item label="合同类型">
              <el-select v-model="filterForm.contractType" placeholder="请选择类型" clearable>
                <el-option label="采购合同" value="purchase" />
                <el-option label="销售合同" value="sales" />
                <el-option label="服务合同" value="service" />
                <el-option label="租赁合同" value="lease" />
                <el-option label="劳务合同" value="labor" />
              </el-select>
            </el-form-item>
            <el-form-item label="合同状态">
              <el-select v-model="filterForm.status" placeholder="请选择状态" clearable>
                <el-option label="草稿" value="draft" />
                <el-option label="待审批" value="pending" />
                <el-option label="已审批" value="approved" />
                <el-option label="执行中" value="active" />
                <el-option label="已完成" value="completed" />
                <el-option label="已终止" value="terminated" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
              <el-button icon="Refresh" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="contractList" stripe>
            <el-table-column prop="contractNo" label="合同编号" width="150" />
            <el-table-column prop="contractName" label="合同名称" width="200" />
            <el-table-column prop="contractType" label="合同类型" width="120">
              <template #default="{ row }">
                <el-tag>{{ getContractTypeText(row.contractType) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="partyA" label="甲方" width="150" />
            <el-table-column prop="partyB" label="乙方" width="150" />
            <el-table-column prop="amount" label="合同金额" width="120" align="right">
              <template #default="{ row }">
                ¥{{ row.amount.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="signDate" label="签订日期" width="120" />
            <el-table-column prop="startDate" label="开始日期" width="120" />
            <el-table-column prop="endDate" label="结束日期" width="120" />
            <el-table-column prop="status" label="状态" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewDetail(row)">详情</el-button>
                <el-button link type="success" @click="viewFile(row)">附件</el-button>
                <el-button link type="warning" @click="editContract(row)">编辑</el-button>
                <el-button link type="info" @click="viewHistory(row)">履约</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>

        <!-- 合同审批 -->
        <el-tab-pane label="合同审批" name="approval">
          <el-table :data="approvalList" stripe>
            <el-table-column prop="contractNo" label="合同编号" width="150" />
            <el-table-column prop="contractName" label="合同名称" width="200" />
            <el-table-column prop="submitter" label="提交人" width="100" />
            <el-table-column prop="submitTime" label="提交时间" width="180" />
            <el-table-column prop="currentApprover" label="当前审批人" width="120" />
            <el-table-column prop="approvalStep" label="审批环节" width="120" />
            <el-table-column prop="status" label="状态" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getApprovalStatusType(row.status)">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewApprovalDetail(row)">查看</el-button>
                <el-button link type="success" @click="approveContract(row)">审批</el-button>
                <el-button link type="danger" @click="rejectContract(row)">驳回</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 履约管理 -->
        <el-tab-pane label="履约管理" name="performance">
          <el-table :data="performanceList" stripe>
            <el-table-column prop="contractNo" label="合同编号" width="150" />
            <el-table-column prop="contractName" label="合同名称" width="200" />
            <el-table-column prop="performanceRate" label="履约进度" width="150" align="center">
              <template #default="{ row }">
                <el-progress :percentage="row.performanceRate" />
              </template>
            </el-table-column>
            <el-table-column prop="paidAmount" label="已付金额" width="120" align="right">
              <template #default="{ row }">
                ¥{{ row.paidAmount.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="remainingAmount" label="未付金额" width="120" align="right">
              <template #default="{ row }">
                ¥{{ row.remainingAmount.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="nextMilestone" label="下一里程碑" width="150" />
            <el-table-column prop="milestoneDate" label="里程碑日期" width="120" />
            <el-table-column prop="performanceStatus" label="履约状态" width="120" align="center">
              <template #default="{ row }">
                <el-tag :type="getPerformanceStatusType(row.performanceStatus)">
                  {{ row.performanceStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewPerformance(row)">详情</el-button>
                <el-button link type="success" @click="recordPerformance(row)">记录履约</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 到期提醒 -->
        <el-tab-pane label="到期提醒" name="expiry">
          <el-table :data="expiryList" stripe>
            <el-table-column prop="contractNo" label="合同编号" width="150" />
            <el-table-column prop="contractName" label="合同名称" width="200" />
            <el-table-column prop="partyA" label="甲方" width="150" />
            <el-table-column prop="partyB" label="乙方" width="150" />
            <el-table-column prop="endDate" label="到期日期" width="120" />
            <el-table-column prop="daysRemaining" label="剩余天数" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getDaysType(row.daysRemaining)">{{ row.daysRemaining }}天</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="renewalStatus" label="续约状态" width="120">
              <template #default="{ row }">
                <el-tag>{{ row.renewalStatus }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="renewContract(row)">续约</el-button>
                <el-button link type="warning" @click="notifyRenewal(row)">提醒</el-button>
                <el-button link type="danger" @click="terminateContract(row)">终止</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 合同模板 -->
        <el-tab-pane label="合同模板" name="templates">
          <el-button type="primary" icon="Plus" @click="showTemplateDialog = true" style="margin-bottom: 15px">
            添加模板
          </el-button>

          <el-table :data="templateList" stripe>
            <el-table-column prop="templateName" label="模板名称" width="200" />
            <el-table-column prop="templateType" label="模板类型" width="120">
              <template #default="{ row }">
                <el-tag>{{ getContractTypeText(row.templateType) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="模板说明" min-width="200" show-overflow-tooltip />
            <el-table-column prop="usageCount" label="使用次数" width="100" align="center" />
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column label="操作" width="240" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewTemplate(row)">预览</el-button>
                <el-button link type="success" @click="useTemplate(row)">使用</el-button>
                <el-button link type="warning" @click="editTemplate(row)">编辑</el-button>
                <el-button link type="danger" @click="deleteTemplate(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 新建合同对话框 -->
    <el-dialog v-model="showAddDialog" title="新建合同" width="900px">
      <el-form :model="contractForm" :rules="rules" ref="contractFormRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同编号" prop="contractNo">
              <el-input v-model="contractForm.contractNo" placeholder="自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同类型" prop="contractType">
              <el-select v-model="contractForm.contractType" placeholder="请选择类型">
                <el-option label="采购合同" value="purchase" />
                <el-option label="销售合同" value="sales" />
                <el-option label="服务合同" value="service" />
                <el-option label="租赁合同" value="lease" />
                <el-option label="劳务合同" value="labor" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="合同名称" prop="contractName">
          <el-input v-model="contractForm.contractName" placeholder="请输入合同名称" />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="甲方" prop="partyA">
              <el-input v-model="contractForm.partyA" placeholder="请输入甲方名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乙方" prop="partyB">
              <el-input v-model="contractForm.partyB" placeholder="请输入乙方名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同金额" prop="amount">
              <el-input-number v-model="contractForm.amount" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签订日期" prop="signDate">
              <el-date-picker
                v-model="contractForm.signDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker
                v-model="contractForm.startDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker
                v-model="contractForm.endDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="合同内容" prop="content">
          <el-input
            v-model="contractForm.content"
            type="textarea"
            :rows="6"
            placeholder="请输入合同内容"
          />
        </el-form-item>

        <el-form-item label="附件上传">
          <el-upload
            class="upload-demo"
            action="#"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="contractForm.fileList"
            :auto-upload="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持pdf、doc、docx格式，单个文件不超过10MB
              </div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="contractForm.remarks"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="info" @click="saveAsDraft">保存草稿</el-button>
        <el-button type="primary" @click="handleSubmit">提交审批</el-button>
      </template>
    </el-dialog>

    <!-- 添加模板对话框 -->
    <el-dialog v-model="showTemplateDialog" title="添加合同模板" width="700px">
      <el-form :model="templateForm" label-width="100px">
        <el-form-item label="模板名称">
          <el-input v-model="templateForm.templateName" placeholder="请输入模板名称" />
        </el-form-item>
        <el-form-item label="模板类型">
          <el-select v-model="templateForm.templateType" placeholder="请选择类型">
            <el-option label="采购合同" value="purchase" />
            <el-option label="销售合同" value="sales" />
            <el-option label="服务合同" value="service" />
            <el-option label="租赁合同" value="lease" />
            <el-option label="劳务合同" value="labor" />
          </el-select>
        </el-form-item>
        <el-form-item label="模板说明">
          <el-input
            v-model="templateForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入模板说明"
          />
        </el-form-item>
        <el-form-item label="模板内容">
          <el-input
            v-model="templateForm.templateContent"
            type="textarea"
            :rows="10"
            placeholder="请输入模板内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showTemplateDialog = false">取消</el-button>
        <el-button type="primary" @click="handleTemplateSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 统计数据
const stats = reactive({
  totalContracts: 328,
  draftContracts: 15,
  activeContracts: 156,
  expiringContracts: 12
})

// 当前标签页
const activeTab = ref('list')

// 筛选表单
const filterForm = reactive({
  contractNo: '',
  contractType: '',
  status: ''
})

// 合同列表
const contractList = ref([
  {
    id: 1,
    contractNo: 'CON202501001',
    contractName: '办公设备采购合同',
    contractType: 'purchase',
    partyA: '本公司',
    partyB: '科技设备有限公司',
    amount: 850000,
    signDate: '2025-01-10',
    startDate: '2025-01-15',
    endDate: '2025-12-31',
    status: 'active'
  },
  {
    id: 2,
    contractNo: 'CON202501002',
    contractName: '产品销售合同',
    contractType: 'sales',
    partyA: '本公司',
    partyB: '华为技术有限公司',
    amount: 2850000,
    signDate: '2025-01-08',
    startDate: '2025-01-10',
    endDate: '2025-06-30',
    status: 'active'
  }
])

// 审批列表
const approvalList = ref([
  {
    id: 1,
    contractNo: 'CON202501003',
    contractName: 'IT服务外包合同',
    submitter: '张三',
    submitTime: '2025-01-12 10:30',
    currentApprover: '李经理',
    approvalStep: '部门审批',
    status: '待审批'
  }
])

// 履约列表
const performanceList = ref([
  {
    id: 1,
    contractNo: 'CON202501001',
    contractName: '办公设备采购合同',
    performanceRate: 65,
    paidAmount: 552500,
    remainingAmount: 297500,
    nextMilestone: '第二批次交付',
    milestoneDate: '2025-03-31',
    performanceStatus: '正常'
  }
])

// 到期列表
const expiryList = ref([
  {
    id: 1,
    contractNo: 'CON202401015',
    contractName: '办公室租赁合同',
    partyA: '本公司',
    partyB: '物业管理公司',
    endDate: '2025-02-28',
    daysRemaining: 45,
    renewalStatus: '待续约'
  }
])

// 模板列表
const templateList = ref([
  {
    id: 1,
    templateName: '标准采购合同模板',
    templateType: 'purchase',
    description: '适用于一般物资采购',
    usageCount: 85,
    createTime: '2024-01-15 14:30'
  },
  {
    id: 2,
    templateName: '产品销售合同模板',
    templateType: 'sales',
    description: '适用于产品销售业务',
    usageCount: 126,
    createTime: '2024-02-20 09:15'
  }
])

// 对话框
const showAddDialog = ref(false)
const showTemplateDialog = ref(false)
const contractFormRef = ref(null)

// 表单
const contractForm = reactive({
  contractNo: 'CON' + Date.now(),
  contractType: '',
  contractName: '',
  partyA: '',
  partyB: '',
  amount: 0,
  signDate: '',
  startDate: '',
  endDate: '',
  content: '',
  fileList: [],
  remarks: ''
})

const templateForm = reactive({
  templateName: '',
  templateType: '',
  description: '',
  templateContent: ''
})

// 表单验证规则
const rules = {
  contractType: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
  contractName: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
  partyA: [{ required: true, message: '请输入甲方名称', trigger: 'blur' }],
  partyB: [{ required: true, message: '请输入乙方名称', trigger: 'blur' }],
  amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }]
}

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 方法
const getContractTypeText = (type) => {
  const types = {
    purchase: '采购合同',
    sales: '销售合同',
    service: '服务合同',
    lease: '租赁合同',
    labor: '劳务合同'
  }
  return types[type] || type
}

const getStatusType = (status) => {
  const types = {
    draft: 'info',
    pending: 'warning',
    approved: 'primary',
    active: 'success',
    completed: 'info',
    terminated: 'danger'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    draft: '草稿',
    pending: '待审批',
    approved: '已审批',
    active: '执行中',
    completed: '已完成',
    terminated: '已终止'
  }
  return texts[status] || status
}

const getApprovalStatusType = (status) => {
  return status === '待审批' ? 'warning' : 'success'
}

const getPerformanceStatusType = (status) => {
  const types = {
    '正常': 'success',
    '延期': 'warning',
    '违约': 'danger'
  }
  return types[status] || 'info'
}

const getDaysType = (days) => {
  if (days <= 15) return 'danger'
  if (days <= 30) return 'warning'
  return 'info'
}

const handleTabClick = (tab) => {
  console.log('切换标签页', tab.props.name)
}

const handleSearch = () => {
  console.log('搜索', filterForm)
  ElMessage.success('搜索成功')
}

const handleReset = () => {
  Object.keys(filterForm).forEach(key => {
    filterForm[key] = ''
  })
  ElMessage.success('重置成功')
}

const viewDetail = (row) => {
  console.log('查看详情', row)
  ElMessage.info('查看合同详情')
}

const viewFile = (row) => {
  console.log('查看附件', row)
  ElMessage.info('查看合同附件')
}

const editContract = (row) => {
  Object.assign(contractForm, row)
  showAddDialog.value = true
}

const viewHistory = (row) => {
  console.log('查看履约历史', row)
  ElMessage.info('查看履约历史')
}

const viewApprovalDetail = (row) => {
  console.log('查看审批详情', row)
  ElMessage.info('查看审批详情')
}

const approveContract = (row) => {
  ElMessageBox.prompt('请输入审批意见', '合同审批', {
    confirmButtonText: '同意',
    cancelButtonText: '取消',
    inputPattern: /.+/,
    inputErrorMessage: '审批意见不能为空'
  }).then(({ value }) => {
    console.log('审批意见', value)
    ElMessage.success('审批通过')
  }).catch(() => {})
}

const rejectContract = (row) => {
  ElMessageBox.prompt('请输入驳回原因', '驳回合同', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /.+/,
    inputErrorMessage: '驳回原因不能为空'
  }).then(({ value }) => {
    console.log('驳回原因', value)
    ElMessage.success('已驳回')
  }).catch(() => {})
}

const viewPerformance = (row) => {
  console.log('查看履约详情', row)
  ElMessage.info('查看履约详情')
}

const recordPerformance = (row) => {
  console.log('记录履约', row)
  ElMessage.success('履约记录已添加')
}

const renewContract = (row) => {
  console.log('续约合同', row)
  ElMessage.success('续约流程已启动')
}

const notifyRenewal = (row) => {
  console.log('提醒续约', row)
  ElMessage.success('续约提醒已发送')
}

const terminateContract = (row) => {
  ElMessageBox.confirm('确定要终止该合同吗？', '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('合同已终止')
  }).catch(() => {})
}

const viewTemplate = (row) => {
  console.log('预览模板', row)
  ElMessage.info('预览模板')
}

const useTemplate = (row) => {
  console.log('使用模板', row)
  showAddDialog.value = true
}

const editTemplate = (row) => {
  Object.assign(templateForm, row)
  showTemplateDialog.value = true
}

const deleteTemplate = (row) => {
  ElMessageBox.confirm('确定要删除该模板吗？', '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('模板已删除')
  }).catch(() => {})
}

const handlePreview = (file) => {
  console.log('预览文件', file)
}

const handleRemove = (file, fileList) => {
  console.log('删除文件', file, fileList)
}

const saveAsDraft = () => {
  console.log('保存草稿', contractForm)
  ElMessage.success('已保存为草稿')
  showAddDialog.value = false
}

const handleSubmit = () => {
  contractFormRef.value.validate((valid) => {
    if (valid) {
      console.log('提交审批', contractForm)
      ElMessage.success('已提交审批')
      showAddDialog.value = false
    }
  })
}

const handleTemplateSubmit = () => {
  console.log('提交模板', templateForm)
  ElMessage.success('模板添加成功')
  showTemplateDialog.value = false
}

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped lang="scss">
.contract-management-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    font-size: 24px;
    color: #303133;
  }
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 15px;
  }

  .stat-content {
    flex: 1;

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 14px;
      color: #909399;
    }
  }
}

.main-card {
  .filter-form {
    margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}

.upload-demo {
  :deep(.el-upload__tip) {
    margin-top: 5px;
    color: #909399;
    font-size: 12px;
  }
}
</style>

